<!DOCTYPE html>
<html class=" ">
<head>

  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  <meta charset="utf-8"/>
  <title>胡椒</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta content="" name="description"/>
  <meta content="" name="author"/>

  <link rel="shortcut icon" href="/HuJiao/images/favicon.png" type="image/x-icon"/>
  <!-- Favicon -->
  <link rel="apple-touch-icon-precomposed" href="/HuJiao/images/apple-touch-icon-57-precomposed.png">
  <!-- For iPhone -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/HuJiao/images/apple-touch-icon-114-precomposed.png">
  <!-- For iPhone 4 Retina display -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/HuJiao/images/apple-touch-icon-72-precomposed.png">
  <!-- For iPad -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/HuJiao/images/apple-touch-icon-144-precomposed.png">
  <!-- For iPad Retina display -->

  <!-- CORE CSS FRAMEWORK - START -->
  <link href="/HuJiao/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="/HuJiao/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
  <link href="/HuJiao/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
  <link href="/HuJiao/css/animate.min.css" rel="stylesheet" type="text/css"/>
  <link href="/HuJiao/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css"/>
  <!-- CORE CSS FRAMEWORK - END -->

  <!-- OTHER SCRIPTS INCLUDED ON THIS PAGE - START -->
  <link href="/HuJiao/plugins/morris-chart/css/morris.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/jquery-ui/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/rickshaw-chart/css/graph.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/rickshaw-chart/css/detail.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/rickshaw-chart/css/legend.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/rickshaw-chart/css/extensions.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/rickshaw-chart/css/rickshaw.min.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/rickshaw-chart/css/lines.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/jvectormap/jquery-jvectormap-2.0.1.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="/HuJiao/plugins/icheck/skins/minimal/white.css" rel="stylesheet" type="text/css" media="screen"/>
  <!-- OTHER SCRIPTS INCLUDED ON THIS PAGE - END -->

  <!-- CORE CSS TEMPLATE - START -->
  <link href="/HuJiao/css/responsive.css" rel="stylesheet" type="text/css"/>
  <link href="/HuJiao/css/style.css" rel="stylesheet" type="text/css"/>
  <link href="/HuJiao/css/responsive.css" rel="stylesheet" type="text/css"/>
  <!-- CORE CSS TEMPLATE - END -->

  <link href="/HuJiao/plugins/superbox/css/style.css" rel="stylesheet" type="text/css"/>

</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>

<% if (pageinfo) { %>

<!-- START TOPBAR -->
<div class='page-topbar '>
  <div class="logo-area">
    <img src="/HuJiao/images/hujiao/banner.jpg" alt="胡椒"/>
  </div>
</div>
<!-- END TOPBAR -->

<!-- START CONTAINER -->
<div class="page-container row-fluid">

  <!-- SIDEBAR - START -->
  <div class="page-sidebar ">

    <!-- Main User HeaderImg, Nickname, Location And Voice Message-->
    <div class="profile-info row" id="user_message">
      <div class="profile-image col-md-4 col-sm-4 col-xs-4">
        <div class="profile-image-circle">
          <img src="<%= pageinfo.user_pic %>" class="img-responsive img-circle">
        </div>
      </div>
      <div class="profile-message">
        <img src="/HuJiao/images/hujiao/bubble_1.png" class="img-responsive">
      </div>
      <div class="profile-details">
        <span class="profile-user"><%= pageinfo.nick_name %></span>

        <div class="pt5">
          <span style="" class="gb_foed gb_fo1">
            <li style="list-style-type:none;"><i class="fa fa-location_1"></i>
              <span id="user_location" class="t"></span>
          </span>
        </div>
      </div>
    </div>

    <!-- Comment Banner -->
    <div class="bg-white wid-blog-content">
      <div class="info-wrapper col-md-10 col-sm-10 col-xs-9" style="width: 100%">
        <ul class="list-unstyled list-inline">
          <li><span style="font-size: 22px">评论</span></li>
          <% if (authdata) { %>
          <li style="border-right: #777777 1px solid;height: 22px;"></li>
          <li><span style="font-size: 22px"><a href="#comment-container">我要评论</a></span></li>
          <li><img src="/HuJiao/images/hujiao/bubble_2.png"></li>
          <% } %>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>

    <!-- Comment User List - START -->
    <%
    for(var i = 0; i < pageinfo.comment_list.length; i++) {
      var comment_info = pageinfo.comment_list[i];
    if (comment_info.msg_type == "T") {
    %>
    <div class="bg-white wid-blog-content">
      <div class="pic-wrapper col-md-2 col-sm-2 col-xs-3 text-center">
        <img src="<%= comment_info.comment_user_head_img %>" class="" alt="">
      </div>
      <div class="info-wrapper col-md-10 col-sm-10 col-xs-9">
        <div class="info text-muted"><%= comment_info.content_text %></div>
        <div class="info-details">
          <ul class="list-unstyled list-inline">
            <li><%= comment_info.comment_user_nick %></li>
            <li><i class="fa fa-location"></i><span id="user-<%= comment_info.comment_id %>"></span></li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <% } else if (comment_info.msg_type == "S") { %>
    <div class="bg-white wid-blog-content" id="voice-<%= comment_info.comment_id %>">
      <div class="pic-wrapper col-md-2 col-sm-2 col-xs-3 text-center">
        <img src="<%= comment_info.comment_user_head_img %>" class="" alt="">
      </div>
      <div class="info-wrapper col-md-10 col-sm-10 col-xs-9">
        <div class="info text-muted">
          <img src="/HuJiao/images/hujiao/bubble_3.png"
               class="img-responsive">
        </div>
        <div class="info-details">
          <ul class="list-unstyled list-inline">
            <li><%= comment_info.comment_user_nick %></li>
            <li><i class="fa fa-location"></i><span id="user-<%= comment_info.comment_id %>"></span></li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <% } else if (comment_info.msg_type == "P") { %>
    <div class="bg-white wid-blog-content">
      <div class="pic-wrapper col-md-2 col-sm-2 col-xs-3 text-center">
        <img src="<%= comment_info.comment_user_head_img %>" class="" alt="">
      </div>
      <div class="info-wrapper col-md-10 col-sm-10 col-xs-9">
        <div class="wrapper">
          <div class="superbox">
            <div id="superbox-show"></div>

            <% var images = comment_info.content_url.split(",");
            for (var j = 0; j < images.length; j++) { %>
            <div class="superbox-list">
              <img src="/HuJiao/images/<%= images[j] %>" data-img="/HuJiao/images/<%= images[j] %>"
                   class="superbox-img"/>
            </div>
            <% } %>

            <div class="superbox-float"></div>
          </div>
        </div>

        <div class="info-details">
          <ul class="list-unstyled list-inline">
            <li><%= comment_info.comment_user_nick %></li>
            <li><i class="fa fa-location"></i><span id="user-<%= comment_info.comment_id %>"></span></li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <% } } %>
    <!-- 用于规避样式覆盖等问题 -->
    <div class="wrapper" style="display: none">
      <!-- SuperBox -->
      <div class="superbox">
        <div class="superbox-list">
          <img src="HuJiao/plugins/superbox/img/superbox/superbox-thumb-1.jpg"
               data-img="HuJiao/plugins/superbox/img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
        </div>
        <div class="superbox-float"></div>
      </div>
      <!-- /SuperBox -->
    </div>
    <!-- Comment User List - END -->

    <% if (authdata) { %>
    <div id="comment-container" class="comment comment-input">
      <div class="pic-wrapper text-center">
        <img id="audio-btn" alt="" src="/HuJiao/images/hujiao/icon_1.png" data-src="data/profile/profile.png"
             data-src-retina="data/profile/profile.png">
      </div>
      <div class="info-wrapper text-center">
        <form action="">
          <input id="text-message" type="text" placeholder="输入评论内容" class="form-control">
          <input id="voice-message" type="button" value="点击录制消息" class="form-control" style="display: none;">
          <input type="submit" value="submit" style="display: none;"/>
        </form>
      </div>
      <div class="pic-wrapper text-center">
        <img id="image-btn" alt="" src="/HuJiao/images/hujiao/ico_2.png" data-src="data/profile/profile.png"
             data-src-retina="data/profile/profile.png">
      </div>
    </div>
    <% } %>
    <!-- QRCode -->
    <div class="downloadInfo">

      <div class="downloadTips">
        <img src="/HuJiao/images/hujiao/downloadTips.png" alt=""/>
      </div>

      <div class="downloadContainer">
        <div class="appStore">
          <img src="/HuJiao/images/hujiao/Apple_erwei.jpg">
        </div>
        <div class="android">
          <img src="/HuJiao/images/hujiao/Android_erwei.jpg">
        </div>
      </div>

      <div class="downloadContainer">
        <div class="appStoreBtn">
          <a href="<%= shareinfo.share_ios %>"><img src="/HuJiao/images/hujiao/App_Store.png"></a>
        </div>
        <div class="androidBtn">
          <a href="<%= shareinfo.share_android %>"><img src="/HuJiao/images/hujiao/Android_Store.png"></a>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="/HuJiao/images/hujiao/foot_bg.png">
    </div>
    <!-- QRCode - END -->

  </div>
  <!--  SIDEBAR - END -->

  <div class="chatapi-windows "></div>
</div>
<!-- END CONTAINER -->

<% } else { %>

<div class="empty">您查看的页面不存在或已被删除</div>

<% } %>
<!-- LOAD FILES AT PAGE END FOR FASTER LOADING -->

<!-- CORE JS FRAMEWORK - START -->
<script src="/HuJiao/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!--<script src="/HuJiao/plugins/superbox/js/jquery.min.js" type="text/javascript"></script>-->
<script src="/HuJiao/plugins/superbox/js/superbox.js"></script>
<script type="text/javascript">
  $(function () {
    $('.superbox').SuperBox();
  });
</script>
<!--<script src="/HuJiao/js/jquery.easing.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/pace/pace.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/perfect-scrollbar/perfect-scrollbar.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/viewport/viewportchecker.js" type="text/javascript"></script>-->
<!-- CORE JS FRAMEWORK - END -->


<!-- OTHER SCRIPTS INCLUDED ON THIS PAGE - START -->
<!--<script src="/HuJiao/plugins/rickshaw-chart/vendor/d3.v3.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/jquery-ui/smoothness/jquery-ui.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/rickshaw-chart/js/Rickshaw.All.js"></script>-->
<!--<script src="/HuJiao/plugins/sparkline-chart/jquery.sparkline.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/morris-chart/js/raphael-min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/morris-chart/js/morris.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/jvectormap/jquery-jvectormap-2.0.1.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/gauge/gauge.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/plugins/icheck/icheck.min.js" type="text/javascript"></script>-->
<!--<script src="/HuJiao/js/dashboard.js" type="text/javascript"></script>-->
<!-- OTHER SCRIPTS INCLUDED ON THIS PAGE - END -->

<!-- CORE TEMPLATE JS - START -->
<script src="/HuJiao/js/scripts.js" type="text/javascript"></script>
<!-- END CORE TEMPLATE JS - END -->

<script src="/HuJiao/js/jweixin-1.0.0.js"></script>
<script>
  <% if (authdata) { %>
  wx.config({
    debug: false,
    appId: "<%= authdata.appInfo.appid %>",
    timestamp: "<%= authdata.injectInfo.timestamp %>",
    nonceStr: "<%= authdata.injectInfo.nonceStr %>",
    signature: "<%= authdata.injectInfo.signature %>",
    jsApiList: [
      'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo',
      'onMenuShareQZone', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
      'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd',
      'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage',
      'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu',
      'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard'
    ]
  });

  /**
   * 发布评论后的界面显示, 自己的评论不显示距离.
   * todo 界面展示相关js, 上传信息到自己的服务器
   */
  function publishComment(type, content, location) {
    <% if (authdata) { %>
//    alert("type: " + type + " content: " + JSON.stringify(content) + JSON.stringify(location));
    var posStr = "";
    if (location) {
      posStr = location.latitude + "," + location.longitude
    }
    // 临时存储数据, 方便测试
    $.post("/WeChatUploadList/create", {"type": type, "serverId": content, "location": posStr}, function () {
      alert("publish comments on server" + JSON.stringify(arguments));
    });
    if (type == "S" || type == "P") {
      $.get("/HuJiaoComments/downloadRes", {"appid": "<%= authdata.appInfo.appid %>", "name": content}, function () {
        console.log("download res success");
      });
    }
    // 评论数据结构
    var postdata = {
      "msg_id": "<%= pageinfo.msg_id %>",
      "comment_id": Math.random().toString(36).substr(2, 16),
      "comment_user_id": "<%= authdata.userInfo.openid %>",
      "comment_user_head_img": "<%= authdata.userInfo.headimgurl %>",
      "comment_user_nick": "<%= authdata.userInfo.nickname %>",
      "comment_user_location": posStr,
      "msg_type": type,
      "content_url": type != "T" ? content.toString() : "",
      "content_text": type == "T" ? content : "",
      "create_time": JSON.stringify(new Date()).replace("T", " ").replace(/\.\d{3}Z/, "")
    };
    $.post("/HuJiaoComments/create", postdata, function () {
      // todo 开始动态渲染界面
      alert("HuJiaoComments" + JSON.stringify(arguments));
    });
    $.post("http://221.229.166.229:8093/hujiao-remote/Msg/SendMsgInfoComment", postdata, function () {
      // todo 开始动态渲染界面
      alert("SendMsgInfoComment" + JSON.stringify(arguments));
    });
    <% } %>
  }

  /**
   * 获取距离, 参考 WeChatAPIService.calcDistance
   */
  function calcDistance(lat1, lng1, lat2, lng2, next) {
    lat1 = parseFloat(lat1);
    lng1 = parseFloat(lng1);
    lat2 = parseFloat(lat2);
    lng2 = parseFloat(lng2);
    if (typeof next != "function") {
      next = function () {
      };
    }

    var EARTH_RADIUS = 6378137.0;    //单位M
    var PI = Math.PI;

    function getRad(d) {
      return d * PI / 180.0;
    }

    /**
     * caculate the great circle distance 把地球当成圆球计算, 有误差
     * @param {Object} lat1
     * @param {Object} lng1
     * @param {Object} lat2
     * @param {Object} lng2
     */
    function getGreatCircleDistance(lat1, lng1, lat2, lng2) {
      var radLat1 = getRad(lat1);
      var radLat2 = getRad(lat2);

      var a = radLat1 - radLat2;
      var b = getRad(lng1) - getRad(lng2);

      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000.0;

      return s;
    }

    /**
     * approx distance between two points on earth ellipsoid 把地球当成椭球计算, 较精确
     * @param {Object} lat1
     * @param {Object} lng1
     * @param {Object} lat2
     * @param {Object} lng2
     */
    function getFlatternDistance(lat1, lng1, lat2, lng2) {
      var f = getRad((lat1 + lat2) / 2);
      var g = getRad((lat1 - lat2) / 2);
      var l = getRad((lng1 - lng2) / 2);

      var sg = Math.sin(g);
      var sl = Math.sin(l);
      var sf = Math.sin(f);

      var s, c, w, r, d, h1, h2;
      var a = EARTH_RADIUS;
      var fl = 1 / 298.257;

      sg = sg * sg;
      sl = sl * sl;
      sf = sf * sf;

      s = sg * (1 - sl) + (1 - sf) * sl;
      c = (1 - sg) * (1 - sl) + sf * sl;

      w = Math.atan(Math.sqrt(s / c));
      r = Math.sqrt(s * c) / w;
      d = 2 * w * a;
      h1 = (3 * r - 1) / 2 / c;
      h2 = (3 * r + 1) / 2 / s;

      return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    }

    var distance = getFlatternDistance(lat1, lng1, lat2, lng2);
    next(null, distance);
    return distance;
  }

  wx.ready(function () {
    var location = null;  // {"longitude": 0,"latitude": 0,"accuracy": 0,"speed": -1,"errMsg": ""};
    // comments voice
    var records = {
      "user_message": {
        "localId": "",
        "serverId": "<%= pageinfo.content_url %>"
      }
    };
    var pictures = {
      "user_pictures": {
        "localId": [],
        "serverId": []
      }
    };
    // temp voice for record
    var voice = {
      localId: "",
      serverId: ""
    };
    // upload images
    var images = {
      localId: [],
      serverId: []
    };

    wx.getLocation({
      success: function (res) {
        <%
        var user_pos = pageinfo.location.split(",");
        var user_lat = user_pos[0], user_lng = user_pos[1];
        if (user_lat && user_lng) {
        %>
        var distance = calcDistance("<%= lat %>", "<%= lng %>", res.latitude, res.longitude);
        var lenUnit = "";
        if (distance >= 1000) {
          distance = Math.floor(distance / 1000);
          lenUnit = "公里";
        } else if (distance < 1000) {
          distance = Math.floor(distance);
          lenUnit = "米";
        } else {
          distance = 10;
          lenUnit = "米";
        }
        $("#user_location").html("相距" + distance + lenUnit);
        <%
        }
        // 评论者位置
        for(var i = 0; i < pageinfo.comment_list.length; i++) {
          var comment_info = pageinfo.comment_list[i];
          var pos = comment_info.comment_user_location.split(",");
          var lat = pos[0], lng = pos[1];
          if (lat && lng) {
        %>
        var distance = calcDistance("<%= lat %>", "<%= lng %>", res.latitude, res.longitude);
        var lenUnit = "";
        if (distance >= 1000) {
          distance = Math.floor(distance / 1000);
          lenUnit = "公里";
        } else if (distance < 1000) {
          distance = Math.floor(distance);
          lenUnit = "米";
        } else {
          distance = 10;
          lenUnit = "米";
        }
        $("#user-<%= comment_info.comment_id %>").html("相距" + distance + lenUnit);
        <% } } %>
        location = res;
      },
      cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
      }
    });

    // voice handle
    setTimeout(function () {
      document.querySelector("#user_message").onclick = function () {
        if (!records.user_message.localId) {
          wx.downloadVoice({
            serverId: records.user_message.serverId,
            success: function (res) {
              records.user_message.localId = res.localId;
              wx.playVoice({
                localId: records.user_message.localId
              });
            }
          });
        } else {
          wx.playVoice({
            localId: records.user_message.localId
          });
        }
      }
    }, 2000);

    <% for (var j = 0; j < pageinfo.comment_list.length; j++) {
    var comment_info = pageinfo.comment_list[j];
    if (comment_info.msg_type == "S" && comment_info.content_url) {
    %>
    (function (document, divId) {
      records[divId] = {
        "localId": "",
        "serverId": "<%= comment_info.content_url %>"
      };
      document.querySelector("#" + divId).onclick = function () {
        if (!records[divId].localId) {
          wx.downloadVoice({
            serverId: records[divId].serverId,
            success: function (res) {
              records[divId].localId = res.localId;
              wx.playVoice({
                localId: records[divId].localId
              });
            }
          });
        } else {
          wx.playVoice({
            localId: records[divId].localId
          });
        }
      };
    })(document, "voice-<%= comment_info.comment_id %>");
    <% } else if (comment_info.msg_type == "P" && comment_info.content_url) { %>

    <% } } %>

    function recordOver(res) {
      voice.localId = res.localId;
      document.querySelector('#voice-message').value = "点击录制消息";
      //alert("录音结束自动上传中...");
      wx.uploadVoice({
        localId: voice.localId,
        success: function (res) {
          //alert('上传语音成功，serverId 为' + res.serverId);
          voice.serverId = res.serverId;
          publishComment("S", res.serverId, location);
        }
      });
    }

    document.querySelector('#audio-btn').onclick = function () {
      $("#text-message").toggle();
      $("#voice-message").toggle();
    };
    document.querySelector("#text-message").onkeydown = function (event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];
//      if(e && e.keyCode==27){ // 按 Esc
//        //要做的事情
//      }
//      if(e && e.keyCode==113){ // 按 F2
//        //要做的事情
//      }
      if (e && e.keyCode == 13) { // enter 键
        publishComment("T", $(this).val(), location);
        $(this).val("");
      }
    };
    document.querySelector('#voice-message').onmousedown = function () {
      document.querySelector('#voice-message').value = "录音中...";
      wx.startRecord({
        cancel: function () {
          alert('用户拒绝授权录音');
        }
      });
    };
    document.querySelector('#voice-message').onmouseup = function () {
      wx.stopRecord({
        success: function (res) {
          recordOver(res);
          //alert("录音结束");
        },
        fail: function (res) {
          //alert(JSON.stringify(res));
          alert("录制失败,请重新录制!");
        }
      });
    };
    wx.onVoiceRecordEnd({
      complete: function (res) {
        recordOver(res);
        //alert('录音时间已超过一分钟');
      }
    });

    // images handle
    document.querySelector('#image-btn').onclick = function () {
      wx.chooseImage({
        success: function (res) {
          images.localId = res.localIds;
          //alert('已选择 ' + res.localIds.length + ' 张图片, 正在上传...');
          images.serverId = [];

          var i = 0;

          function upload() {
            wx.uploadImage({
              localId: images.localId[i],
              success: function (res) {
                i++;
                //alert('已上传：' + i + '/' + images.localId.length);
                images.serverId.push(res.serverId);
                if (i < images.localId.length) {
                  upload();
                } else {
                  publishComment("P", images.serverId, location);
                }
              },
              fail: function (res) {
                //alert(JSON.stringify(res));
                alert("图片上传失败!");
              }
            });
          }

          upload();
        }
      });
    };
    document.querySelector('#previewImage').onclick = function () {
      wx.previewImage({
        current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
        urls: [
          'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
          'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
          'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
        ]
      });
    };
  });

  wx.error(function (res) {
    //alert(res.errMsg);
  });

  <% } %>
</script>
<script src="/HuJiao/js/zepto.min.js"></script>

</body>
</html>
